<!-- 用户详情页面视图 - 展示单个用户的详细信息和编辑功能 -->
<template>
  <div class="userid-container" :class="{ 'dark-mode': isDarkMode }">
    <!-- 通知提示组件 -->
    <div v-if="notification.show" class="notification" :class="notification.type">
      <span>{{ notification.message }}</span>
    </div>
    <!-- 用户详情页面内容 -->
    <div class="page-header">
      <h2>用户信息详情</h2>
      <div class="action-buttons">
        <button class="btn btn-primary" @click="handleEditUser" v-if="!isEditing" :disabled="loading">编辑</button>
        <button class="btn btn-success" @click="handleSaveChanges" v-if="isEditing" :disabled="loading || saving">保存</button>
        <button class="btn btn-secondary" @click="handleCancelEdit" v-if="isEditing" :disabled="loading || saving">取消</button>
        <button class="btn btn-icon" @click="toggleDarkMode" title="切换深色模式">
          <svg v-if="!isDarkMode" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
            <path d="M8 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2zm0 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-10a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 3z"/>
          </svg>
          <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
            <path d="M8 15a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在加载用户信息...</p>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <div class="error-icon">⚠️</div>
      <p class="error-message">{{ error }}</p>
      <button class="btn btn-primary" @click="fetchUserData">重试</button>
    </div>
    
    <!-- 无数据状态 -->
    <div v-else-if="!loading && !error" class="error-container">
      <div class="error-icon">ℹ️</div>
      <p class="error-message">暂无用户数据</p>
      <button class="btn btn-primary" @click="fetchUserData">重新加载</button>
    </div>
    
    <!-- 上次更新时间提示 -->
    <div v-if="lastUpdated && userData" class="last-updated">
      <small>最后更新: {{ lastUpdated }}</small>
    </div>

    <!-- 用户信息内容 -->
    <div v-if="userData" class="user-content fade-in">
      <!-- 用户基本信息卡片 -->
      <div class="user-card">
        <div class="user-avatar">
          <div class="avatar-circle">{{ getAvatarText(userData.username) }}</div>
        </div>
        <div class="user-basic-info">
          <h3 class="user-name">{{ userData.username || '未设置用户名' }}</h3>
          <p class="user-role">{{ userData.profile?.role_display || '未设置角色' }}</p>
          <p class="user-department">{{ userData.profile?.department?.name || '未分配部门' }}</p>
        </div>
        <div class="user-status">
          <span class="status-badge" :class="userData.is_active ? 'active' : 'inactive'">
            {{ userData.is_active ? '在职' : '离职' }}
          </span>
        </div>
      </div>

      <!-- 详细信息区域 -->
      <div class="details-section">
        <!-- 账号信息 -->
        <div class="info-card">
          <h4 class="card-title">账号信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <label>用户ID</label>
              <span>{{ userData.id || '未设置' }}</span>
            </div>
            <div class="info-item" v-if="!isEditing">
              <label>用户名</label>
              <span>{{ userData.username || '未设置' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>用户名</label>
              <input v-model="editForm.username" type="text" class="form-input" :class="{ 'error': validationErrors.username }">
              <span v-if="validationErrors.username" class="validation-error">{{ validationErrors.username }}</span>
            </div>
            <div class="info-item" v-if="!isEditing">
              <label>邮箱</label>
              <span>{{ userData.email || '未设置' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>邮箱</label>
              <input v-model="editForm.email" type="email" class="form-input" :class="{ 'error': validationErrors.email }">
              <span v-if="validationErrors.email" class="validation-error">{{ validationErrors.email }}</span>
            </div>
            <div class="info-item">
              <label>注册时间</label>
              <span>{{ userData.date_joined ? formatDate(userData.date_joined) : '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>最后登录</label>
              <span>{{ userData.last_login ? formatDate(userData.last_login) : '从未登录' }}</span>
            </div>
            <div class="info-item">
              <label>账号类型</label>
              <span>{{ getUserTypeText(userData) }}</span>
            </div>

          </div>
        </div>

        <!-- 个人信息 -->
        <div class="info-card">
          <h4 class="card-title">个人信息</h4>
          <div class="info-grid">
            <div class="info-item" v-if="!isEditing">
              <label>手机号</label>
              <span>{{ userData.profile?.phone || '未设置' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>手机号</label>
              <input v-model="editForm.phone" type="tel" class="form-input" :class="{ 'error': validationErrors.phone }">
              <span v-if="validationErrors.phone" class="validation-error">{{ validationErrors.phone }}</span>
            </div>
            <div class="info-item" v-if="!isEditing">
              <label>职位</label>
              <span>{{ userData.profile?.role_display || '未设置' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>职位</label>
              <select v-model="editForm.role" class="form-input">
                <option value="admin">管理员</option>
                <option value="employee">职员</option>
                <option value="intern">实习生</option>
              </select>
            </div>
            <div class="info-item" v-if="!isEditing">
              <label>部门</label>
              <span>{{ userData.profile?.department?.name || '未分配' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>部门</label>
              <select v-model="editForm.departmentId" class="form-input">
                <option value="">未分配</option>
                <option v-for="dept in departments" :key="dept.id" :value="dept.id.toString()">
                  {{ dept.name }}
                </option>
              </select>
            </div>
            <div class="info-item" v-if="!isEditing">
              <label>入职日期</label>
              <span>{{ userData.profile?.hire_date ? formatDate(userData.profile.hire_date) : '未设置' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>入职日期</label>
              <input v-model="editForm.hireDate" type="date" class="form-input">
            </div>
            <div class="info-item" v-if="!isEditing">
              <label>在职状态</label>
              <span>{{ userData.is_active ? '在职' : '离职' }}</span>
            </div>
            <div class="info-item" v-else>
              <label>在职状态</label>
              <select v-model="editForm.isActive" class="form-input">
                <option value="true">在职</option>
                <option value="false">离职</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 用户详情页面组件
// 作为嵌套路由加载到 User.vue 中
// 现在只显示当前登录用户的信息

import { ref, reactive, onMounted, computed } from 'vue'
import request from '../../utls/require'

// 定义API响应接口
interface ApiResponse<T = any> {
  success: boolean;
  data: T;
  message?: string;
}

// 从localStorage获取当前登录用户信息
const getCurrentUserId = (): string => {
  try {
    const userStr = localStorage.getItem('user')
    console.log('localStorage中的用户信息:', userStr)
    if (userStr) {
      const user = JSON.parse(userStr)
      console.log('解析后的用户ID:', user.id)
      return user.id?.toString() || ''
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
  console.log('未找到有效用户信息')
  return ''
}

// 当前登录用户的ID
const userId = computed(() => getCurrentUserId())

// 定义数据接口类型
interface CachedData {
  data: any;
  timestamp: number;
}

interface UserEditState {
  isEditing: boolean;
  formData: {
    username: string;
    email: string;
    phone: string;
    role: string;
    departmentId: string;
    hireDate: string;
    isActive: string;
  }
}
  
  // 状态管理
const userData = ref<any>(null)
const departments = ref<any[]>([])
const loading = ref(false)
const departmentsLoading = ref(false)
const saving = ref(false)
const error = ref('')
const isEditing = ref(false)
const lastUpdated = ref<string>('')
const isDarkMode = ref(false)

// 表单验证错误
const validationErrors = reactive({
  username: '',
  email: '',
  phone: ''
})

// 编辑表单
const editForm = reactive({
  username: '',
  email: '',
  phone: '',
  role: '',
  departmentId: '',
  hireDate: '',
  isActive: 'true'
})

// 提示消息
const notification = reactive({
  show: false,
  message: '',
  type: 'success' as 'success' | 'error' | 'info'
})

// 显示提示消息
const showNotification = (message: string, type: 'success' | 'error' | 'info' = 'info') => {
  notification.message = message
  notification.type = type
  notification.show = true
  setTimeout(() => {
    notification.show = false
  }, 3000)
}

// 缓存配置
const CACHE_EXPIRY = {
  USER_DATA: 5 * 60 * 1000, // 5分钟
  DEPARTMENTS: 30 * 60 * 1000, // 30分钟
  EDIT_STATE: 24 * 60 * 60 * 1000 // 24小时
}

// 工具函数：检查缓存是否过期
const isCacheExpired = (timestamp: number, expiryTime: number): boolean => {
  return Date.now() - timestamp > expiryTime
}

// 工具函数：保存带时间戳的缓存
const saveToCache = (key: string, data: any, _expiryType: keyof typeof CACHE_EXPIRY): void => {
  try {
    const cachedData: CachedData = {
      data,
      timestamp: Date.now()
    }
    localStorage.setItem(key, JSON.stringify(cachedData))
    
    // 保存深色模式偏好
    if (key === 'dark_mode') {
      localStorage.setItem('dark_mode', JSON.stringify(data))
    }
  } catch (error) {
    console.warn('缓存保存失败:', error)
  }
}

// 工具函数：读取缓存并检查有效性
const getFromCache = (key: string, expiryType: keyof typeof CACHE_EXPIRY): any | null => {
  try {
    const cached = localStorage.getItem(key)
    if (!cached) return null
    
    const parsedData: CachedData = JSON.parse(cached)
    if (isCacheExpired(parsedData.timestamp, CACHE_EXPIRY[expiryType])) {
      // 缓存过期，清除旧数据
      localStorage.removeItem(key)
      return null
    }
    
    return parsedData.data
  } catch (error) {
    console.warn('缓存读取失败:', error)
    localStorage.removeItem(key) // 清除损坏的缓存
    return null
  }
}

// 保存编辑状态到本地存储
const saveEditState = () => {
  const editState: UserEditState = {
    isEditing: isEditing.value,
    formData: { ...editForm }
  }
  saveToCache(`edit_state_${userId.value}`, editState, 'EDIT_STATE')
}

// 恢复编辑状态
const restoreEditState = () => {
  const savedState = getFromCache(`edit_state_${userId.value}`, 'EDIT_STATE')
  if (savedState && savedState.isEditing) {
    isEditing.value = true
    Object.assign(editForm, savedState.formData)
  }
}

// 清除编辑状态
const clearEditState = () => {
  localStorage.removeItem(`edit_state_${userId.value}`)
}

// 获取用户数据
const fetchUserData = async () => {
  // 验证用户是否已登录
  console.log('准备获取用户数据，当前用户ID:', userId.value)
  if (!userId.value) {
    error.value = '用户未登录，请先登录'
    console.log('用户未登录，显示错误信息')
    return
  }
  
  loading.value = true
  error.value = ''
  
  try {
    // 先尝试从缓存加载（快速显示）
    const cachedUser = getFromCache(`user_${userId.value}`, 'USER_DATA')
    if (cachedUser) {
      userData.value = cachedUser
      lastUpdated.value = new Date(cachedUser.timestamp || Date.now()).toLocaleString('zh-CN')
      console.log('从缓存加载用户数据')
    }
    
    // 无论是否有缓存，都尝试从API获取最新数据
    console.log('正在请求API获取用户数据')
    const response = await request.get(`/auth/user/`) as ApiResponse<any>
    
    if (response && response.success) {
      userData.value = response.data
      lastUpdated.value = new Date().toLocaleString('zh-CN')
      // 更新缓存
      saveToCache(`user_${userId.value}`, response.data, 'USER_DATA')
      error.value = ''
      console.log('成功获取用户数据:', response.data)
    } else if (!cachedUser) {
      // 没有缓存且API失败，显示错误
      error.value = response?.message || '获取用户信息失败'
      console.error('获取用户信息失败:', response?.message)
    }
  } catch (err: any) {
    // 网络错误，但已有缓存数据时不显示错误
    console.error('获取用户数据时发生错误:', err)
    if (!userData.value) {
      error.value = err.message || '网络错误，请稍后重试'
    } else {
      // 已有缓存数据但网络错误，显示提示信息
      error.value = '已显示缓存数据，无法获取最新信息'
    }
  } finally {
    loading.value = false
    console.log('获取用户数据完成，用户数据状态:', userData.value ? '有数据' : '无数据')
    // 恢复编辑状态（如果有的话）
    if (!isEditing.value) {
      restoreEditState()
    }
  }
}

// 获取部门数据
const fetchDepartments = async () => {
  departmentsLoading.value = true
  try {
    // 先尝试从缓存加载
    const cachedDepartments = getFromCache('departments_cache', 'DEPARTMENTS')
    if (cachedDepartments) {
      departments.value = cachedDepartments
    }
    
    // 尝试从API获取最新部门数据
    const response = await request.get('/company/departments/') as ApiResponse<any>
    if (response && response.success) {
      departments.value = response.data.results || response.data
      saveToCache('departments_cache', departments.value, 'DEPARTMENTS')
    }
  } catch (err) {
    console.warn('获取部门数据失败，使用缓存或空数据')
  } finally {
    departmentsLoading.value = false
  }
}

// 初始化编辑表单
const initEditForm = () => {
  if (userData.value) {
    editForm.username = userData.value.username
    editForm.email = userData.value.email
    editForm.phone = userData.value.profile?.phone || ''
    editForm.role = userData.value.profile?.role || 'employee'
    editForm.departmentId = userData.value.profile?.department?.id?.toString() || ''
    editForm.hireDate = userData.value.profile?.hire_date || ''
    editForm.isActive = userData.value.is_active.toString()
  }
}

// 表单验证函数
const validateForm = (): boolean => {
  let isValid = true
  
  // 重置验证错误
  Object.keys(validationErrors).forEach(key => {
    validationErrors[key as keyof typeof validationErrors] = ''
  })
  
  // 验证用户名
  if (!editForm.username.trim()) {
    validationErrors.username = '用户名不能为空'
    isValid = false
  }
  
  // 验证邮箱
  if (!editForm.email.trim()) {
    validationErrors.email = '邮箱不能为空'
    isValid = false
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editForm.email)) {
    validationErrors.email = '请输入有效的邮箱地址'
    isValid = false
  }
  
  // 验证手机号（可选，但如果有值则验证格式）
  if (editForm.phone && !/^1[3-9]\d{9}$/.test(editForm.phone)) {
    validationErrors.phone = '请输入有效的手机号'
    isValid = false
  }
  
  return isValid
}

// 处理编辑按钮点击
const handleEditUser = () => {
  initEditForm()
  isEditing.value = true
  // 保存编辑状态
  saveEditState()
  showNotification('进入编辑模式', 'info')
}

// 处理保存更改
const handleSaveChanges = async () => {
  // 表单验证
  if (!validateForm()) {
    showNotification('请修正表单中的错误', 'error')
    return
  }
  
  saving.value = true
  try {
    const updateData = {
      username: editForm.username,
      email: editForm.email,
      phone: editForm.phone,
      role: editForm.role,
      department_id: editForm.departmentId || null,
      hire_date: editForm.hireDate,
      is_active: editForm.isActive === 'true'
    }
    
    const response = await request.put(`/company/users/${userId.value}/`, updateData) as ApiResponse<any>
    if (response && response.success) {
      userData.value = response.data
      isEditing.value = false
      
      // 更新缓存
      saveToCache(`user_${userId.value}`, response.data, 'USER_DATA')
      lastUpdated.value = new Date().toLocaleString('zh-CN')
      
      // 清除编辑状态
      clearEditState()
      
      // 显示成功提示
      showNotification('用户信息更新成功', 'success')
    } else {
      const errorMsg = response?.message || '更新失败'
      error.value = errorMsg
      showNotification(errorMsg, 'error')
      // 保存失败时也保存编辑状态，以便用户可以继续编辑
      saveEditState()
    }
  } catch (err: any) {
    const errorMsg = err.message || '保存失败，请稍后重试'
    error.value = errorMsg
    showNotification(errorMsg, 'error')
    // 保存失败时也保存编辑状态
    saveEditState()
  } finally {
    saving.value = false
  }
}

// 处理取消编辑
const handleCancelEdit = () => {
  isEditing.value = false
  // 清除编辑状态
  clearEditState()
  
  // 重置表单
  Object.keys(editForm).forEach(key => {
    editForm[key as keyof typeof editForm] = ''
  })
  
  // 清除验证错误
  Object.keys(validationErrors).forEach(key => {
    validationErrors[key as keyof typeof validationErrors] = ''
  })
  
  showNotification('已取消编辑', 'info')
}

// 切换深色模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  localStorage.setItem('dark_mode', JSON.stringify(isDarkMode.value))
  applyDarkMode()
}

// 应用深色模式
const applyDarkMode = () => {
  if (isDarkMode.value) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}

// 监听编辑表单变化，自动保存编辑状态
import { watchEffect } from 'vue'

// 防抖定时器ID
let editTimeoutId: number | undefined

watchEffect(() => {
  if (isEditing.value) {
    // 防抖保存，避免频繁写入localStorage
    // 先清除之前的定时器
    if (editTimeoutId !== undefined) {
      clearTimeout(editTimeoutId)
    }
    // 设置新的定时器
    editTimeoutId = window.setTimeout(() => {
      saveEditState()
    }, 500)
  }
})

// 辅助函数 - 生成头像文字
const getAvatarText = (username: string): string => {
  return username ? username.charAt(0).toUpperCase() : 'U'
}

// 辅助函数 - 格式化日期
const formatDate = (dateString: string): string => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 辅助函数 - 获取用户类型文本
const getUserTypeText = (user: any): string => {
  if (user.is_superuser) return '超级管理员'
  if (user.is_staff) return '系统管理员'
  return '普通用户'
}

// 组件挂载时获取用户数据和部门数据
onMounted(() => {
  // 加载深色模式偏好
  const savedDarkMode = localStorage.getItem('dark_mode')
  if (savedDarkMode !== null) {
    isDarkMode.value = JSON.parse(savedDarkMode)
  } else {
    // 默认根据系统偏好设置
    isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches
  }
  
  applyDarkMode()
  
  // 并行请求提高加载效率
  Promise.all([
    fetchUserData(),
    fetchDepartments()
  ]).catch(() => {
    // 静默处理错误，因为各自的函数内部已经处理了错误逻辑
  })
})
</script>

<style scoped>
/* 全局动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 用户详情页面样式 */
.userid-container {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f7fa;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 深色模式样式 */
.userid-container.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.userid-container.dark-mode .user-card,
.userid-container.dark-mode .info-card {
  background-color: #2d2d2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.userid-container.dark-mode .user-name,
.userid-container.dark-mode .info-item span,
.userid-container.dark-mode .card-title,
.userid-container.dark-mode .page-header h2 {
  color: #ffffff;
}

.userid-container.dark-mode .user-role,
.userid-container.dark-mode .user-department,
.userid-container.dark-mode .info-item label,
.userid-container.dark-mode .last-updated small {
  color: #b0b0b0;
}

.userid-container.dark-mode .form-input {
  background-color: #3d3d3d;
  border-color: #555;
  color: #ffffff;
}

.userid-container.dark-mode .form-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.3);
}

.userid-container.dark-mode .card-title {
  border-bottom-color: #444;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-header h2 {
  color: #333;
  font-size: 24px;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

/* 图标按钮 */
.btn-icon {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #d9d9d9;
}

.btn-icon:hover {
  background-color: #f0f0f0;
}

.userid-container.dark-mode .btn-icon {
  border-color: #555;
  color: #e0e0e0;
}

.userid-container.dark-mode .btn-icon:hover {
  background-color: #444;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-success {
  background-color: #52c41a;
  color: white;
}

.btn-success:hover {
  background-color: #73d13d;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
}

.btn-secondary:hover {
  background-color: #e8e8e8;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态样式 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #ff4d4f;
  text-align: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-message {
  margin-bottom: 16px;
  max-width: 400px;
  line-height: 1.5;
}

.userid-container.dark-mode .error-container {
  background-color: #2d2d2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 最后更新时间样式 */
.last-updated {
  text-align: right;
  margin-bottom: 12px;
  color: #999;
}

.last-updated small {
  font-size: 12px;
}

/* 用户卡片样式 */
.user-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fade-in {
  animation: fadeIn 0.5s ease;
}

.user-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.user-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.user-avatar {
  margin-right: 24px;
}

.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff, #722ed1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
}

.user-basic-info {
  flex: 1;
}

.user-name {
  font-size: 24px;
  margin: 0 0 8px 0;
  color: #333;
}

.user-role,
.user-department {
  margin: 4px 0;
  color: #666;
}

.user-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.inactive {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

/* 详细信息卡片样式 */
.details-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  margin: 0 0 20px 0;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  position: relative;
}

.info-item label {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.info-item span {
  font-size: 16px;
  color: #333;
  transition: color 0.3s ease;
  word-break: break-word;
}

.form-input {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-input.error {
  border-color: #ff4d4f;
}

.form-input.error:focus {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
}

/* 验证错误消息 */
.validation-error {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
}

/* 通知提示样式 */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification.success {
  background-color: #52c41a;
}

.notification.error {
  background-color: #ff4d4f;
}

.notification.info {
  background-color: #1890ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .userid-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .user-avatar {
    margin-right: 0;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .notification {
    left: 20px;
    right: 20px;
    width: calc(100% - 40px);
  }
}

/* 加载状态优化 */
.loading-container {
  position: relative;
}

.loading-spinner {
  position: relative;
}

.loading-spinner::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: rgba(24, 144, 255, 0.1);
  animation: pulse 1.5s infinite;
}
</style>